<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>UN Org Tree</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        html,
        body {
            width: 100%;
            height: 100%;
        }
        
        body {
            width: 960px;
            margin: 0 auto;
        }
        
        #un-tree--wrapper,
        #un-tree--wrapper2 {
            margin: 60px auto 0;
            width: 100%;
            overflow: auto;
            text-align: center;
        }
    </style>
</head>

<body>
    <h2>初始化参数类型: Json Array</h2>
    <div id="un-tree--wrapper"></div>
    <h2>初始化参数类型: JsonTree</h2>
    <div id="un-tree--wrapper2"></div>
    <h2>水平渲染: JsonTree</h2>
    <div id="un-tree--wrapper3"></div>
</body>
<script>
    let listData = [{
        id: "99d78438-1f14-4552-ba77-039bff75e4bc",
        text: "公司董事会1111",
        parent: "root",
    }, {
        id: "d2eb4680-4cee-4549-8a0f-171fd9888f4b",
        text: "总经理",
        parent: "99d78438-1f14-4552-ba77-039bff75e4bc",
    }, {
        id: "18c9f830-e699-4fe1-b79c-71a6b34b7e8f",
        text: "副总经理1",
        parent: "d2eb4680-4cee-4549-8a0f-171fd9888f4b",
    }, {
        id: "b05991b4-8944-4dd8-92c4-ffd7848e7112",
        text: "副总经理2",
        parent: "d2eb4680-4cee-4549-8a0f-171fd9888f4b",
    }, {
        id: "f135c05b-ffde-4d82-895f-a6daf052c178",
        text: "副总经理3",
        parent: "d2eb4680-4cee-4549-8a0f-171fd9888f4b",
    }, {
        id: "234e9d2e-676b-4601-9820-e9b064761ff4",
        text: "技术总监",
        parent: "d2eb4680-4cee-4549-8a0f-171fd9888f4b",
    }, {
        id: "7937421a-ee31-4988-934d-7e6469f0f37f",
        text: "数据中心",
        parent: "18c9f830-e699-4fe1-b79c-71a6b34b7e8f",
    }, {
        id: "11c1b052-89f8-4873-a876-6de6130385e5",
        text: "测量中心",
        parent: "18c9f830-e699-4fe1-b79c-71a6b34b7e8f",
    }, {
        id: "e9c44ca7-5302-4ae7-836a-2adc93e0f5d4",
        text: "财务部",
        parent: "b05991b4-8944-4dd8-92c4-ffd7848e7112",
    }, {
        id: "e9c44ca7-5302-4ae7-836a-2adc93e0f5d4",
        text: "办公室",
        parent: "b05991b4-8944-4dd8-92c4-ffd7848e7112",
    }, {
        id: "bc407b45-56ef-4bdc-ab31-325d4cad5243",
        text: "项目部",
        parent: "f135c05b-ffde-4d82-895f-a6daf052c178",
    }, {
        id: "71fc1ee3-5f31-49a8-8cdc-086c92bff785",
        text: "评估一部",
        parent: "f135c05b-ffde-4d82-895f-a6daf052c178",
    }, {
        id: "9a0214ba-4afc-43ce-9851-fbc79dd48f25",
        text: "技术部",
        parent: "234e9d2e-676b-4601-9820-e9b064761ff4",
    }, {
        id: "71fc1ee3-5f31-49a8-8cdc-086c92bff785",
        text: "评估二部",
        parent: "234e9d2e-676b-4601-9820-e9b064761ff4",
    }, ];

    function handleClick(itemId, itemData, itemNode) {
        console.log("数据id:", itemId);
        console.log("该项对应数据对象:", itemData);
        console.log("当前DOM节点:", itemNode);
    }
    let el = document.getElementById("un-tree--wrapper");
    let tree = new UNTree({
        el: el,
        jsonArr: listData,
        parentld: "root",
        type: "list",
        viewClass: "view-demo",
        itemClass: "item-demo",
        click: handleClick,
    });

    let treeData = [{
        id: "99d78438-1f14-4552-ba77-039bff75e4bc",
        text: "公司董事会222",
        parent: "root",
        children: [{
            id: "d2eb4680-4cee-4549-8a0f-171fd9888f4b",
            text: "总经理",
            parent: "99d78438-1f14-4552-ba77-039bff75e4bc",
            children: [{
                id: "18c9f830-e699-4fe1-b79c-71a6b34b7e8f",
                text: "副总经理1",
                parent: "d2eb4680-4cee-4549-8a0f-171fd9888f4b",
                children: [{
                    id: "7937421a-ee31-4988-934d-7e6469f0f37f",
                    text: "数据中心",
                    parent: "18c9f830-e699-4fe1-b79c-71a6b34b7e8f",
                }, {
                    id: "11c1b052-89f8-4873-a876-6de6130385e5",
                    text: "测量中心",
                    parent: "18c9f830-e699-4fe1-b79c-71a6b34b7e8f",
                }, ],
            }, {
                id: "b05991b4-8944-4dd8-92c4-ffd7848e7112",
                text: "副总经理2",
                parent: "d2eb4680-4cee-4549-8a0f-171fd9888f4b",
                children: [{
                    id: "e9c44ca7-5302-4ae7-836a-2adc93e0f5d4",
                    text: "财务部",
                    parent: "b05991b4-8944-4dd8-92c4-ffd7848e7112",
                }, {
                    id: "e9c44ca7-5302-4ae7-836a-2adc93e0f5d4",
                    text: "办公室",
                    parent: "b05991b4-8944-4dd8-92c4-ffd7848e7112",
                }, ],
            }, {
                id: "f135c05b-ffde-4d82-895f-a6daf052c178",
                text: "副总经理3",
                parent: "d2eb4680-4cee-4549-8a0f-171fd9888f4b",
                children: [{
                    id: "bc407b45-56ef-4bdc-ab31-325d4cad5243",
                    text: "项目部",
                    parent: "f135c05b-ffde-4d82-895f-a6daf052c178",
                }, {
                    id: "71fc1ee3-5f31-49a8-8cdc-086c92bff785",
                    text: "评估一部",
                    parent: "f135c05b-ffde-4d82-895f-a6daf052c178",
                }, ],
            }, {
                id: "234e9d2e-676b-4601-9820-e9b064761ff4",
                text: "技术总监",
                parent: "d2eb4680-4cee-4549-8a0f-171fd9888f4b",
                children: [{
                    id: "9a0214ba-4afc-43ce-9851-fbc79dd48f25",
                    text: "技术部",
                    parent: "234e9d2e-676b-4601-9820-e9b064761ff4",
                }, {
                    id: "71fc1ee3-5f31-49a8-8cdc-086c92bff785",
                    text: "评估二部",
                    parent: "234e9d2e-676b-4601-9820-e9b064761ff4",
                }, ],
            }, ],
        }, ],
    }, ];

    let el2 = document.getElementById("un-tree--wrapper2");
    let tree2 = new UNTree({
        el: el2,
        jsonArr: treeData,
        parentld: "root",
        type: "tree",
        viewClass: "view-demo",
        itemClass: "item-demo",
        click: handleClick,
    });


    let el3 = document.getElementById("un-tree--wrapper3");
    let tree3 = new UNTree({
        el: el3,
        jsonArr: treeData,
        parentld: "root",
        type: "tree",
        mode: 'horizontal',
        viewClass: "view-demo",
        itemClass: "item-demo",
        click: handleClick,
    });
</script>

</html>